<include file="Public/min-header"/>
<!--图标样式-->
<link rel="stylesheet" type="text/css" href="/Public/bootstrap/css/bootstrap.min.css" />
<!--主要样式-->
<link rel="stylesheet" type="text/css" href="/Public/bootstrap/css/style.css" />
<script type="text/javascript" src="/Public/js/jquery-1.8.2.min.js"></script>
<style type="text/css">
    [class^="icon-"], [class*=" icon-"] {
        display: inline-block;
        width: 14px;
        height: 14px;
        margin-top: 1px;
        line-height: 14px;
        vertical-align: text-top;
        background-image: url("/Public/bootstrap//img/glyphicons-halflings.png");
        background-position: 14px 14px;
        background-repeat: no-repeat;
    }
    .icon-folder-open {
        width: 16px;
        background-position: -408px -120px;
    }
    .icon-minus-sign {
        background-position: -24px -96px;
    }
    .icon-plus-sign {
        background-position: 0 -96px;
    }
    .icon-leaf {
        background-position: -48px -120px;
    }
    .tree li:last-child::before {
        height: 25px;
    }

</style>
<div class="wrapper">
    <include file="Public/breadcrumb"/>

    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-header">
                        <nav class="navbar navbar-default">
                            <div class="collapse navbar-collapse">
                                <form method="post" role="search" class="navbar-form form-inline" id="search-form" action="#">
                                    <div class="form-group">
                                        <input type="text" placeholder="上级id" name="user_id" id="user_id"  class="form-control">
                                    </div>
                                    <button class="btn btn-info" type="submit"><i class="fa fa-search"></i> 筛选</button>
                                    <input type="hidden" name="__hash__" value="a01e6d1e396fb3ce0a93cb19f162cfd3_3916459228c25bf1bc328ea4818f9d79" />
                                </form>
                            </div>
                        </nav>
                    </div>
                    <div class="box-body">
                        <div class="tree well">
                            <ul>
                                <!--循环start-->
                                <foreach name="tree_list" item="vo" key="k" >
                                <li>
									<span class="tree_span" data-id="{$vo.user_id}">
                                    	<i class="icon-folder-open"></i>
                                        {$vo.tree_id}:
                                        {$vo.user_name}
                                    </span>
                                </li>
                                </foreach>
                                <!--循环end-->
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<script>

    //  ajax 请求树下面的节点
    $('.tree').on('click','.tree_span',function(){

        tmp_span = $(this);
        tmp_span.siblings('ul').toggle();
        if(tmp_span.hasClass('requrst'))
            return false;

        $.ajax({
            type : "post",
            url:"__CONTROLLER__/ajax_tree",//+tab,
            data : {'user_id':tmp_span.data('id')},
            success: function(data){
                tmp_span.after(data);
                tmp_span.addClass('requrst'); // 表示ajax 请求过了 不再请求第二次
            }
        });

    });
    /*ajax返回数据格式
    <ul>
         <li>
             <span class="tree_span" data-id="473">
                 <i class="icon-folder-open"></i>473:andy
             </span>
         </li>
     </ul>
     */
</script>
</body>
</html>